<template>
  <view class="forgot-page">
    <!-- 忘记密码表单 -->
    <view class="forgot-form">
      <view class="form-title">
        <text>忘记密码</text>
      </view>
      
      <view class="form-item">
        <uni-icons type="phone" size="20" color="#999"></uni-icons>
        <input 
          class="input" 
          v-model="formData.phone" 
          placeholder="请输入手机号" 
          type="number"
          maxlength="11"
        />
      </view>
      
      <view class="form-item">
        <uni-icons type="email" size="20" color="#999"></uni-icons>
        <input 
          class="input" 
          v-model="formData.code" 
          placeholder="请输入验证码" 
          type="number"
          maxlength="6"
        />
        <view class="code-btn" @click="getCode" :class="{disabled: isCounting}">
          <text>{{codeBtnText}}</text>
        </view>
      </view>
      
      <view class="form-item">
        <uni-icons type="locked" size="20" color="#999"></uni-icons>
        <input 
          class="input" 
          v-model="formData.password" 
          placeholder="请输入新密码(6-20位字符)" 
          password
        />
      </view>
      
      <view class="form-item">
        <uni-icons type="locked" size="20" color="#999"></uni-icons>
        <input 
          class="input" 
          v-model="formData.confirmPwd" 
          placeholder="请再次输入新密码" 
          password
        />
      </view>
      
      <view class="reset-btn" @click="handleReset">
        <text>重置密码</text>
      </view>
      
      <view class="login-tip">
        <text>想起密码了?</text>
        <text class="login-btn" @click="goLogin">立即登录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        phone: '',
        code: '',
        password: '',
        confirmPwd: ''
      },
      isCounting: false,
      countdown: 60,
      codeBtnText: '获取验证码'
    }
  },
  methods: {
    getCode() {
      if (this.isCounting) return
      
      if (!this.formData.phone || !/^1[3-9]\d{9}$/.test(this.formData.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      this.isCounting = true
      this.startCountdown()
      
      // 模拟发送验证码
      uni.showToast({
        title: '验证码已发送',
        icon: 'none'
      })
    },
    startCountdown() {
      this.codeBtnText = `${this.countdown}s后重新获取`
      const timer = setInterval(() => {
        this.countdown--
        this.codeBtnText = `${this.countdown}s后重新获取`
        
        if (this.countdown <= 0) {
          clearInterval(timer)
          this.isCounting = false
          this.countdown = 60
          this.codeBtnText = '获取验证码'
        }
      }, 1000)
    },
    goLogin() {
      uni.navigateBack()
    },
    handleReset() {
      if (!this.formData.phone || !/^1[3-9]\d{9}$/.test(this.formData.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.code || !/^\d{6}$/.test(this.formData.code)) {
        uni.showToast({
          title: '请输入6位验证码',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.password || this.formData.password.length < 6) {
        uni.showToast({
          title: '密码长度需6-20位',
          icon: 'none'
        })
        return
      }
      
      if (this.formData.password !== this.formData.confirmPwd) {
        uni.showToast({
          title: '两次输入密码不一致',
          icon: 'none'
        })
        return
      }
      
      uni.showLoading({
        title: '重置中...'
      })
      
      // 模拟API请求
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '密码重置成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 1000)
    }
  }
}
</script>

<style>
.forgot-page {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f7f7;
}
.forgot-form {
  width: 80%;
  padding: 40rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.05);
}
.form-title {
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
  text-align: center;
  margin-bottom: 60rpx;
}
.form-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  margin-bottom: 30rpx;
  border-bottom: 1rpx solid #eee;
  position: relative;
}
.input {
  flex: 1;
  margin-left: 20rpx;
  font-size: 28rpx;
  color: #333;
}
.code-btn {
  position: absolute;
  right: 0;
  padding: 10rpx 20rpx;
  background-color: #ff2d4a;
  color: #fff;
  font-size: 24rpx;
  border-radius: 30rpx;
}
.code-btn.disabled {
  background-color: #ccc;
}
.reset-btn {
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #ff2d4a;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin-bottom: 30rpx;
}
.login-tip {
  text-align: center;
  font-size: 24rpx;
  color: #999;
}
.login-btn {
  color: #ff2d4a;
  margin-left: 10rpx;
}
</style>